<template>
  <div>
    <!--分页-->
    <el-row :gutter="20">
      <el-col :span="2"><el-button type="primary" round @click="showAddPaeg">添加角色</el-button></el-col>
    </el-row>
    <el-pagination
      :page-size="page.pageSize"
      :total="page.totalCount"
      :current-page.sync="page.pageNo"
      @current-change="initTableData"
      @size-change="handleSizeChange"
      :page-sizes="[2, 3, 5, 10, 20, 30, 50]"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!--表格内容-->
    <el-table
      ref="list"
      :data="tableData"
      style="width: 100%"
      border
      stripe
      highlight-current-row
      :default-sort="{prop: 'date', order: 'descending'}"
      @row-click="handleRowClick"
      @select-all="handleCheckedAllAndCheckedNone"
      @select="handleCheckedAllAndCheckedNone">
      <el-table-column
        property="id"
        label="编号">
      </el-table-column>
      <el-table-column
        property="roleName"
        label="角色名">
      </el-table-column>
      <el-table-column
        property="roleRemark"
        label="备注">
      </el-table-column>
      <el-table-column
        property="createDate"
        label="创建时间">
      </el-table-column>
      <el-table-column
        property="updateDate"
        label="更新时间">
      </el-table-column>
      <el-table-column
        label="操作"
        width="180"
        align="center">
        <template slot-scope="scope">
          <el-button circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
            @click="rowEdit(scope.$index, scope.row)"></el-button>
          <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
            @click="rowDel(scope.$index, scope.row, $event);"></el-button>
           <el-button circle type="info" plain  @click="roleGetPermission(scope.row.id)">授权</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--编辑-弹出层-->
    <el-dialog
      :title="pageName"
      :visible.sync="isShowEditDialog"
      width="430px"
      @close="dialogClose">
      <el-form
        ref="editForm"
        :model="formFileds"
        label-width="55px">
        <el-form-item label="角色名" prop="roleName">
          <el-input v-model="formFileds.roleName"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="roleRemark">
          <el-input v-model="formFileds.roleRemark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleEdit()" class="pull-right margin-l-25">确定</el-button>
          <el-button @click="isShowEditDialog = false;" class="pull-right">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--授权页面-->
    <el-dialog
      title="角色授权"
      :visible.sync="ShowDialog"
      width="430px">
        <el-tree
          ref="tree"
          :data="menuData"
          show-checkbox
          node-key="id"
          :default-checked-keys="checkedMenus"
          :props="defaultProps">
        </el-tree>
        <div>
          <el-button @click="getCheckedKeys">确定</el-button>
          <el-button @click="ShowDialog = false" >取消</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "../../api/TutorialDataApi";
  export default {
    name: "Table",
    data() {
      return {
        formFileds: {},
        pageName:'',
        page: { //分页参数
          pageNo: 1,
          pageSize: 2,
          totalCount: 0
        },
        menuData: [],
        defaultProps: {
          children: 'children',
          label: 'moduleName'
        },
        savePermissionId:'',
        checkedMenus:[],
        ShowDialog:false,
        tableData: [],
        isShowEditDialog:false,
      }
      },
    methods: {
      // pageSize改变时
      handleSizeChange(val) {
        this.page.pageSize = val;
        this.initTableData();
      },
      handleRowClick(row, event, column) {

        // 仅选中当前行
        this.setCurRowChecked(row);
      },
      handleCheckedAllAndCheckedNone(selection) {

        // 当前选中仅一行时操作-（当前表格行高亮）
        1 != selection.length && this.$refs.list.setCurrentRow();
      },
      dialogClose() {
        // 清空编辑表单
        this.$refs.editForm.resetFields();
      },
      rowEdit(index, row) {
        this.isShowEditDialog = true;
        this.pageName='修改角色';
        axios.get('http://localhost:8081/role/selectAllRole?id='+ row.id)
          .then(res => {
            if (res.data.code == 2000) {
              this.formFileds = res.data.data
            }
          })
      },
      //初始化用户数据
      initTableData() {
        axios.get('http://localhost:8081/role/selectAllRolex',{params:this.page})
          .then(res => {
            this.page.totalCount = res.data.data.total
            this.tableData= res.data.data.records
          })
      },
      handleEdit() {
        axios.post('http://localhost:8081/role/saveRole',this.formFileds )
          .then(res => {
            if (res.data.code == 2000) {
              this.isShowEditDialog=false;
              this.initTableData();
              this.$message.success('保存成功');
            }
          })
      },
      //显示添加页面
      showAddPaeg(){
        this.isShowEditDialog = true;
        this.formFileds={};
        this.pageName = '添加角色';
      },
      rowDel(index, row, event) {
        // 让当前删除按钮失焦
        event.target.blur();
        this.$confirm('确定要删除当前行吗？', '删除', {
          comfirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          axios.get('http://localhost:8081/role/deleteRoleAndPermission?roleId='+ row.id)
            .then(res => {
              if (res.data.code == 2000) {
                this.initTableData()
                this.$message.success('删除成功');
              }
            })
        });
      },
      //角色授权弹窗
      roleGetPermission(roleId){
        this.ShowDialog = true;
        this.checkedMenus=[];
        this.seleteId(roleId);
        this.savePermissionId = roleId;
        axios.get("http://localhost:8081/module/roleGetPermission")
          .then(res => {
            if (res.data.code == 2000){
              this.menuData = res.data.data;
              this.seleteId(roleId);
            }
          })
      },
      //查询默认的显示id
      seleteId(roleId){
        axios.get("http://localhost:8081/module/seleteId?roleId="+roleId)
          .then(res => {
            if (res.data.code == 2000){
              this.checkedMenus = res.data.data
            }
          })
      },
      getCheckedKeys() {
        var keys = this.$refs.tree.getCheckedKeys();
        this.savePermission(keys)
      },
      savePermission(keys){
        var url = "http://localhost:8081/permission/savePermission?roleId="+this.savePermissionId+"&moduleIds="+keys
        axios.get(url)
          .then(res => {
            if (res.data.code == 2000){
              this.$message.success('授权成功');
              this.initTableData();
              this.ShowDialog = false;
            }
          })
       },
      // 选中当前行-当前行的复选框被勾选
      setCurRowChecked(row) {

        this.$refs.list.clearSelection();
        this.$refs.list.toggleRowSelection(row);
      }
    },
    mounted() {
      this.initTableData()
    }
  }
</script>

<style scoped lang="less">
.el-form {
  padding: 0 10px;
}
.el-date-editor {
  width: 100% !important;
}
</style>
